  <div class="row-fluid">
    <div class="span2">
      <label class="small">Mode</label>
      <!-- Banana: does not support 'min','mean','max', and 'total' modes yet -->
      <!-- <select ng-change="set_refresh(true)" class="input-small" ng-model="panel.mode" ng-options="f for f in ['count','min','mean','max','total','value']"></select> -->
      <select ng-change="set_refresh(true)" class="input-small" ng-model="panel.mode" ng-options="f for f in ['count','values']"></select>
    </div>
    <div class="span2" ng-show="panel.mode != 'count'">
      <label class="small">Value Field</label>
        <input ng-change="set_refresh(true)" placeholder="Start typing" bs-typeahead="fields.list" type="text" class="input-small" ng-model="panel.value_field">
    </div>
    <div class="span2" ng-show="panel.mode != 'count'">
      <label class="small">Max Rows <tip>Maximum number of rows to retrieve for the result set.</tip></label>
      <input ng-change="set_refresh(true)" placeholder="100000" type="number" class="input-small" ng-model="panel.max_rows">
    </div>
    <div class="span3" ng-show="panel.mode != 'count'">
      <label class="small">Note</label><small> In <strong>{{panel.mode}}</strong> mode the configured field <strong>must</strong> be a numeric type.</small>
    </div>
  </div>
  <!-- Row for Group By field when Mode is values -->
  <div class="row-fluid" ng-show="panel.mode == 'values'">
    <div class="span4"></div>
    <div class="span2">
      <label class="small">Group By Field <tip>This field must be a single value field. Leave blank if you do not want to group the result.</tip></label>
      <input ng-change="set_refresh(true)" placeholder="Optional" bs-typeahead="fields.list" type="text" class="input-small" ng-model="panel.group_field">
    </div>
    <div class="span3">
      <label class="small">SUM the group's values <tip>The point value (Y) is the sum of value field in the group</tip></label>
      <input type="checkbox" ng-model="panel.sum_value" ng-checked="panel.sum_value">
    </div>
    <!-- <div class="span3">
      <label class="small">Max Rows/Group <tip>Specify the number of results to return for each group.</tip></label>
      <input ng-change="set_refresh(true)" placeholder="10" type="number" class="input-small" ng-model="panel.group_limit">
    </div> -->
  </div>

  <h5>Chart Settings</h5>
  <div class="row-fluid" style="text-align:center;margin-bottom:10px;">
    <div class="span1"> <label class="small">Bars</label><input type="checkbox" ng-model="panel.bars" ng-checked="panel.bars"></div>
    <div class="span1"> <label class="small">Lines</label><input type="checkbox" ng-model="panel.lines" ng-checked="panel.lines"></div>
    <div class="span1"> <label class="small">Points</label><input type="checkbox" ng-model="panel.points" ng-checked="panel.points"></div>
    <div class="span1"> <label class="small">Stack</label><input type="checkbox" ng-model="panel.stack" ng-checked="panel.stack"></div>
    <div class="span1" ng-show="panel.stack">
      <label style="white-space:nowrap" class="small">Percent <tip>Stack as a percentage of total</tip></label>
      <input type="checkbox"  ng-model="panel.percentage" ng-checked="panel.percentage">
    </div>
    <div class="span1"> <label class="small">Legend</label><input type="checkbox" ng-model="panel.legend" ng-checked="panel.legend"></div>
    <div class="span1"> <label class="small">xAxis</label><input type="checkbox" ng-model="panel['x-axis']" ng-checked="panel['x-axis']"></div>
    <div class="span1"> <label class="small">yAxis</label><input type="checkbox" ng-model="panel['y-axis']" ng-checked="panel['y-axis']"></div>
  </div>

  <div class="row-fluid" style="text-align:center;">
    <div class="span2" ng-show="panel.lines" style="width:65px;">
      <label class="small">Line Fill</label>
      <select class="input-mini" ng-model="panel.fill" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]"></select>
    </div>
    <div class="span2" ng-show="panel.lines" style="width:65px;">
      <label class="small">Line Width</label>
      <select class="input-mini" ng-model="panel.linewidth" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]"></select>
    </div>
    <div class="span2" ng-show="panel.lines" style="width:60px;">
      <label class="small">Smooth <tip>Smooth the lines by removing zero values.</tip></label>
      <input type="checkbox" ng-model="panel.lines_smooth" ng-checked="panel.lines_smooth">
    </div>
  </div>

  <div class="row-fluid">
    <div class="span2">
      <label class="small">Time correction</label>
      <select ng-model="panel.timezone" class='input-small' ng-options="f for f in ['browser','utc']"></select>
    </div>
    <div class="span1"> <label class="small">Selectable</label><input type="checkbox" ng-model="panel.interactive" ng-checked="panel.interactive"></div>
    <div class="span2">
      <label class="small">Zoom Links</label><input type="checkbox" ng-model="panel.zoomlinks" ng-checked="panel.zoomlinks" />
    </div>
        <div class="span2">
      <label class="small">View Options</label><input type="checkbox" ng-model="panel.options" ng-checked="panel.options" />
    </div>
    <div class="span2">
      <label class="small">Auto-interval</label><input type="checkbox" ng-model="panel.auto_int" ng-checked="panel.auto_int" />
    </div>
    <div class="span2" ng-show='panel.auto_int'>
      <label class="small">Resolution <tip>Shoot for this many data points, rounding to sane intervals</tip></label>
      <input type="number" class='input-mini' ng-model="panel.resolution" ng-change='set_refresh(true)'/>
    </div>
    <div class="span2" ng-hide='panel.auto_int'>
      <label class="small">Interval <tip>Use Solr date math format (eg 1m, 5m, 1d, 2w, 1y)</tip></label>
      <input type="text" class='input-mini' ng-model="panel.interval" ng-change='set_refresh(true)'/>
    </div>
  </div>

  <h5>Tooltip Settings</h5>
  <div class="row-fluid" style="margin-bottom:10px;">
    <div class="span3">
      <label class="small">Stacked Values <tip>How should the values in stacked charts to be calculated?</tip></label>
      <select class="input-medium" ng-model="panel.tooltip.value_type" ng-options="f for f in ['cumulative','individual']"></select>
    </div>
    <div class="span3">
      <label class="small">Display Query <tip>If an alias is set, it will be shown in the tooltip. If not, should it show the query?</tip></label>
      <input type="checkbox" ng-model="panel.tooltip.query_as_alias" />
    </div>
  </div>

  <div class="row-fluid">
      <h5>Real-time (Auto-refresh)</h5>
      <div class="span1">
          <label class="small">Enable</label><input type="checkbox" ng-model="panel.refresh.enable" ng-checked="panel.refresh.enable">
      </div>
      <div class="span2">
          <label class="small">Interval (seconds) <tip>The minimum value is 2.</tip></label>
          <input type="number" min="2" class="input-mini" ng-model="panel.refresh.interval">
      </div>
  </div>
